public void createGradient()   {  
  beginShape();
  texture(gradientBG);       
  vertex( 0, 0,0,0);
  vertex( stgW,0,100,0);
  vertex( stgW,stgH+50,100, 100);
  vertex( 0,stgH+50,0,100);
  endShape();     
}

class Gradient
extends PImage
{
  int color1, color2;
  Gradient ( int _w, int _h )
  {
    super(_w, _h);
    color1 = 0xFF000000;
    color2 = 0xFFFFFFFF;
  }

  Gradient ( int _w, int _h, int _c1, int _c2 )
  {
    super(_w, _h);

    color1 = _c1;
    color2 = _c2;
  }

  void vertical ()
  {
    float as = (((color2 >> 24) & 0xFF) - ((color1 >> 24) & 0xFF)) / this.height;
    float rs = (((color2 >> 16) & 0xFF) - ((color1 >> 16) & 0xFF)) / this.height;
    float gs = (((color2 >>  8) & 0xFF) - ((color1 >>  8) & 0xFF)) / this.height;
    float bs = (((color2 >>  0) & 0xFF) - ((color1 >>  0) & 0xFF)) / this.height;

    for ( int ih=0; ih < this.height; ih++ )
    {
      int c = color( ((color1 >> 16) & 0xFF) + round(rs * ih),
      ((color1 >>  8) & 0xFF) + round(gs * ih),
      ((color1 >>  0) & 0xFF) + round(bs * ih),
      ((color1 >> 24) & 0xFF) + round(as * ih)
        );
      for ( int iw=0; iw < this.width; iw++ )
      {
        this.pixels[iw+(ih*this.width)] = c;
      }
    }   
  }
  void horizontal ()
  {
    float as = (((color2 >> 24) & 0xFF) - ((color1 >> 24) & 0xFF)) / this.width;
    float rs = (((color2 >> 16) & 0xFF) - ((color1 >> 16) & 0xFF)) / this.width;
    float gs = (((color2 >>  8) & 0xFF) - ((color1 >>  8) & 0xFF)) / this.width;
    float bs = (((color2 >>  0) & 0xFF) - ((color1 >>  0) & 0xFF)) / this.width;

    for ( int iw=0; iw < this.width; iw++ )
    {
      int c = color( ((color1 >> 16) & 0xFF) + round(rs * iw),
      ((color1 >>  8) & 0xFF) + round(gs * iw),
      ((color1 >>  0) & 0xFF) + round(bs * iw),
      ((color1 >> 24) & 0xFF) + round(as * iw)
        );
      for ( int ih=0; ih < this.height; ih++ )
      {
        this.pixels[iw+(ih*this.width)] = c;
      }
    }   
  }
}
